<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
        <!-- 表格顶部菜单 -->
        <TableHeader :buttons="['refresh']" />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="onlineUserRef" :pagination="true" border> </Table>
        <DialogOnlineUser ref="chatDiagRef"></DialogOnlineUser>
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted } from 'vue'
import { sysUserOnline } from '/@/api/controllerUrls'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'
import { forceOffline } from '/@/api/sys/sysUserOnline'
import DialogOnlineUser from './dialogonlineuser.vue'
const onlineUserRef = ref()
const chatDiagRef = ref()

// 自定义强制下线按钮
let newButton: OptButton[] = [
    {
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'confirmButton',
        popconfirm: {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonType: 'danger',
            title: '确定将该用户强制下线',
        },
        // 按钮名称
        name: 'offline',
        // 鼠标放置时的 title 提示
        title: '下线',
        // 直接在按钮内显示的文字，title 有值时可为空
        text: '下线',
        // 按钮类型，请参考 element plus 的按钮类型
        type: 'danger',
        // 按钮 icon
        icon: 'fa fa-ban',
        class: 'table-row-info',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: TableRow, field: TableColumn) => {
            forceOffline(row)
        },
        // 按钮是否显示，请返回布尔值
        display: (row: TableRow, field: TableColumn) => {
            return true
        },
        // 按钮是否禁用，请返回布尔值
        disabled: (row: TableRow, field: TableColumn) => {
            return false
        },
        // 自定义el-button属性
        attr: {},
    },
    {
        // 渲染方式:tipButton=带tip的按钮,confirmButton=带确认框的按钮,moveButton=移动按钮
        render: 'tipButton',
        // 按钮名称
        name: 'chat',
        // 鼠标放置时的 title 提示
        title: '通信',
        // 直接在按钮内显示的文字，title 有值时可为空
        text: '通信',
        // 按钮类型，请参考 element plus 的按钮类型
        type: 'success',
        // 按钮 icon
        icon: 'fa fa-commenting',
        class: 'table-row-info',
        // tipButton 禁用 tip
        disabledTip: false,
        // 自定义点击事件
        click: (row: TableRow, field: TableColumn) => {
            chatDiagRef.value.openDialog(row)
        },
        // 按钮是否显示，请返回布尔值
        display: (row: TableRow, field: TableColumn) => {
            return true
        },
        // 按钮是否禁用，请返回布尔值
        disabled: (row: TableRow, field: TableColumn) => {
            return false
        },
        // 自定义el-button属性
        attr: {},
    },
]
const baTable = new baTableClass(new baTableApi(sysUserOnline), {
    expandAll: false,
    dblClickNotEditColumn: [undefined, 'keepalive', 'status'],
    column: [
        { label: 'userId', prop: 'userId', align: 'center', width: '300', show: false },
        { label: '连接Id', prop: 'connectionId', align: 'center', width: '300' },
        { label: '用户名', prop: 'userName', align: 'center', width: '150' },
        { label: '昵称', prop: 'nickName', align: 'center', width: '150' },
        { label: '登录时间', prop: 'time', align: 'center', width: '200' },
        { label: '登录IP', prop: 'ip', align: 'center', width: '100' },
        { label: '浏览器', prop: 'browser', align: 'center', width: '150' },
        { label: '操作系统', prop: 'os', align: 'center', width: '120' },
        { label: '操作', align: 'center', render: 'buttons', buttons: newButton },
    ],
    dragSortLimitField: 'pid',
})

provide('baTable', baTable)
baTable.mount()
onMounted(() => {
    baTable.table.ref = onlineUserRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss"></style>
